import { Suspense, createContext, useState } from "react"
import { NavLink, BrowserRouter } from 'react-router-dom'
import { RecoilRoot } from 'recoil';
import MyRouters from "./router/index"
import global from "./global.module.css"

// 创建一个Context
export const MyContext = createContext({});

function App() {

  // 创建一个state，作为Context provide的值
  const [provideData, setProvideData] = useState({
    name: '张五级',
    age: 22
  })

  const updateProvideData = () => {
    setProvideData({
      name: '张三丰',
      age: Math.ceil(Math.random() * 100)
    })
  }

  return (
    <div className={global.App}>
      {/* 路由lazy懒加载时，必须配合Suspense使用 */}
      <Suspense>
        {/* Context provide组件 */}
        <MyContext.Provider value={provideData}>
          {/* 状态管理器包裹组件 */}
          <RecoilRoot>
            <BrowserRouter>
              <NavLink to="/home" className={global.navItem}>Home</NavLink>
              <NavLink to="/user" className={global.navItem}>User</NavLink>
              <button onClick={() => updateProvideData()}>修改provideData的name</button>
              {/* 路由表 */}
              <MyRouters />
            </BrowserRouter>
          </RecoilRoot>
        </MyContext.Provider>
      </Suspense>
    </div>
  );
}

export default App;
